<template>
  <div id="container">
    <el-header class="header">
      <div class="title">{{ title }}</div>
    </el-header>
    <el-main class="content">
      <el-descriptions title="订单列表信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="车辆ID" :span="2">{{ orderDetail.bicycleId }}</el-descriptions-item>
        <el-descriptions-item label="控制器号" :span="2">{{ orderDetail.controllerId }}</el-descriptions-item>
        <template v-for="item in (orderDetail.fittingValues || [])">
          <el-descriptions-item :label="item.fittingName" :span="2">{{ item.fitting }}</el-descriptions-item>
        </template>
        <el-descriptions-item label="客户" :span="2">{{ orderDetail.clientName }}</el-descriptions-item>
        <el-descriptions-item label="客户订单号" :span="2">{{ orderDetail.clientOrderNumber }}</el-descriptions-item>
        <el-descriptions-item label="生产订单号" :span="2">{{ orderDetail.clientOrderNumber }}</el-descriptions-item>
        <el-descriptions-item label="产品编码" :span="2">{{ orderDetail.productId }}</el-descriptions-item>
        <el-descriptions-item label="产品名称" :span="2">{{ orderDetail.productName }}</el-descriptions-item>
        <el-descriptions-item label="客户型号" :span="2">{{ orderDetail.customerModel }}</el-descriptions-item>
        <el-descriptions-item label="出库日期" :span="2">{{ orderDetail.outboundDate }}</el-descriptions-item>
      </el-descriptions>
      <el-row style="padding: 20px 0;font-weight: 700;">
        登记信息
      </el-row>
      <template v-if="!showFormPage && !isDetail">
        <div class="register-info">
          <el-card class="box-card" v-for="item in registerInfos" :key="item.registerId">
            <div class="content">
              <div class="flex">
                <div class="left-text">单据编号</div>
                <div class="right-text">{{ item.registerId }}</div>
              </div>
              <div class="flex">
                <div class="left-text">登记来源</div>
                <div class="right-text">
                  <dict-tag :options="dict.type.sale_register_source" :value="item.source" />
                </div>
              </div>
              <div class="flex">
                <div class="left-text">修补配件</div>
                <div class="right-text">
                  <dict-tag :options="dict.type.accessory_type" :value="item.repairPart" />
                </div>
              </div>
              <div class="flex">
                <div class="left-text">配件ID</div>
                <div class="right-text">
                  {{ item.partId }}
                </div>
              </div>
              <div class="flex">
                <div class="left-text">配件费用</div>
                <div class="right-text">
                  {{ item.partCost }}
                </div>
              </div>
              <div class="flex">
                <div class="left-text">是否已处理</div>
                <div class="right-text">
                  <el-tag type="success" v-if="item.handleResult">是</el-tag>
                  <el-tag type="danger" v-if="!item.handleResult">否</el-tag>
                </div>
              </div>
            </div>
            <el-button type="primary" @click.stop="showDetail(item)">查看详情</el-button>
          </el-card>

          <div class="add-apply" @click.stop="addApply">
            +
          </div>
        </div>
      </template>
      <template v-if="showFormPage || isDetail">
        <el-form ref="form" :model="form" :rules="rules" label-width="105px">
          <el-form-item label="登记信息来源" v-if="isDetail" prop="source">
            <el-select v-model="form.source" disabled placeholder="请选择登记信息来源">
              <el-option v-for="dict in dict.type.sale_register_source" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单据日期" prop="registerTime">
            <el-date-picker clearable filterable :disabled="isDetail" v-model="form.registerTime" type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="问题描述" prop="questionDesc">
            <el-input v-model="form.questionDesc" :disabled="isDetail" clearable filterable
              placeholder="请输入问题描述信息"></el-input>
          </el-form-item>
          <el-form-item label="客诉图片" prop="picture">
            <ImageUpload @input="uploading" :disabled="isDetail" clearable filterable v-model="picture" :limit="1">
            </ImageUpload>
          </el-form-item>
          <el-form-item label="修补配件" prop="repairPart">
            <el-select v-model="form.repairPart" :disabled="isDetail" clearable filterable placeholder="请选择修补的配件类型">
              <el-option v-for="dict in dict.type.accessory_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="配件ID" prop="partId">
            <el-input v-model="form.partId" :disabled="isDetail" clearable filterable placeholder="请输入配件ID"></el-input>
          </el-form-item>
          <el-form-item label="配件费用" prop="partCost">
            <el-input v-model="form.partCost" :disabled="isDetail" clearable filterable placeholder="请输入配件费用"></el-input>
          </el-form-item>
          <el-form-item label="故障分析" prop="faultAnalysis" v-if="isDetail">
            <el-input v-model="form.faultAnalysis" disabled placeholder="尚未处理" />
          </el-form-item>
          <el-form-item label="处理结果" prop="handleResult" v-if="isDetail">
            <el-input v-model="form.handleResult" disabled type="textarea" placeholder="尚未处理" />
          </el-form-item>
          <el-form-item label="处理日期" v-if="isDetail" prop="handleTime">
            <el-date-picker clearable disabled v-model="form.handleTime" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择处理日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" v-if="!isDetail" :disabled="isDetail" @click="submitForm('form')">提交</el-button>
            <el-button @click="closeForm">返回</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-main>
  </div>
</template>
<script>
import { getOrderDetail, saveRegister, getRegisterInfo } from '@/api/client/register'
export default {
  name: 'ClientSaleRegister',
  dicts: ['accessory_type', 'sale_register_source'],
  data() {
    return {
      uploadUrl: '/saleManagement/register/uploadPicture',
      keyWord: undefined,
      orderDetail: {},
      title: process.env.VUE_APP_TITLE,
      showFormPage: false,
      picture: '',
      form: {},
      registerInfos: [],
      rules: {
        registerTime: [
          { required: true, message: "单据日期不能为空", trigger: "blur" }
        ],
        questionDesc: [
          { required: true, message: "请输入问题描述", trigger: "blur" }
        ],
        picture: [
          { required: true, message: "请上传图片信息", trigger: "change" }
        ],
        repairPart: [
          { required: true, message: "请选择修补的配件类型", trigger: "blur" }
        ],
        partId: [
          { required: true, message: "请输入配件ID", trigger: "blur" }
        ],
        partCost: [
          { required: true, message: '请输入配件费用', trigger: 'blur' },
          { validator: this.validatePositiveNumber, trigger: 'blur' },
        ],
      },
      isDetail: false
    }
  },
  async created() {
    this.keyWord = this.$route.query && this.$route.query.keyWord
    await this.getOrderDetail()
    await this.getRegisterInfo()
  },
  methods: {
    validatePositiveNumber(rule, value, callback) {
      const numValue = Number(value);

      // 检查value是否是非数字类型
      if (isNaN(numValue)) {
        callback(new Error('配件费用必须是数字'));
      } else if (numValue <= 0) {
        callback(new Error('配件费用必须是正数'));
      } else {
        callback();
      }
    },
    //获取商品信息和登记信息
    async getOrderDetail() {
      let resp = await getOrderDetail(this.keyWord)
      this.orderDetail = resp.data.orderDetail
    },
    //根据配件ID获取所有的登记信息
    async getRegisterInfo() {
      let resp = await getRegisterInfo(this.orderDetail.bicycleId)
      this.registerInfos = resp.data
    },

    addApply() {
      this.form.registerTime = new Date()
      this.showFormPage = true
    },
    uploading(url) {
      this.form.picture = url
    },
    reset() {
      this.form = {
        registerId: undefined,
        registerTime: undefined,
        questionDesc: undefined,
        picture: undefined,
        repairPart: undefined,
        partId: undefined,
        partCost: undefined,
        remark: undefined
      }
      this.picture = undefined
      this.resetForm("form");
    },
    async submitForm(formName) {
      let that = this
      await this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let resp = await saveRegister(this.form)
          if (resp.code === 200) {
            that.$modal.msgSuccess('保存成功');
            this.closeForm()
            //重新加载登记信息
            that.getRegisterInfo()
          }
        }
      });
    },
    closeForm() {
      this.reset()
      this.showFormPage = false
      this.isDetail = false
    },
    showDetail(item) {
      this.form = item
      this.picture = item.picture
      this.isDetail = true
    }
  }
}
</script>
<style lang="scss" scoped>
#container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    background: linear-gradient(to right, #f9a825, #f06292);
    color: white;
    text-align: center;
    height: 6vh !important;
    line-height: 6vh;

    .title {
      font-size: 2vh;
    }
  }

  .content {
    .register-info {
      margin-top: 10px;
      display: flex;

      .box-card {
        position: relative;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        padding: 10px;

        ::v-deep .el-card__body {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: -50px;
        }

        .flex {
          display: flex;
          justify-content: space-between;
          line-height: 24px;

          .left-text {
            width: 100px;
            text-align: left;
          }

          .right-text {
            text-align: right;
          }
        }

        ::v-deep .el-button {
          position: absolute;
          bottom: 0;
          width: 81%;
          margin-bottom: 29px;
        }
      }
    }

    .add-apply {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px dashed rgb(25, 150, 252);
      font-size: 50px;
    }
  }
}

@media screen and (min-width: 1024px) and (max-width: 1668px) {
  .content {
    .register-info {
      flex-wrap: wrap;
      justify-content: space-between;

      .box-card,
      .add-apply {
        flex: 0 0 calc(33.333% - 10px);
        width: 300px;
        height: 400px;
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .content {
    .register-info {
      flex-direction: column;

      .box-card,
      .add-apply {
        width: 100%;
        margin: 10px 0;
        height: 300px;
      }
    }
  }
}

@media screen and (min-width: 1668px) {
  .content {
    .register-info {
      flex-wrap: wrap;
      justify-content: space-between;

      .box-card,
      .add-apply {
        flex: 0 0 calc(25% - 10px);
        width: 300px;
        height: 400px;
      }
    }

  }
}
</style>
